<template>
  <div>
    <el-table
      ref="multipleTable"
      :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)"
      tooltip-effect="dark"
      style="width: 100%"
      stripe
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column v-for="item in tableFomat" :key="item._id" :prop="item.prop" :label="item.label" sortable width="170" />
      <slot />
      <el-table-column v-if="operateVisible" label="操作" width="120" fixed="right">
        <template v-if="editVisible" slot-scope="scope">
          <el-tooltip class="item" effect="dark" content="编辑" placement="top-start">
            <el-button
              type="primary"
              icon="el-icon-edit"
              circle
              size="mini"
              @click="handleEdit(scope.$index, scope.row)"
            />
          </el-tooltip>
          <el-tooltip v-if="deleteVisible" class="item" effect="dark" content="删除" placement="top">
            <el-button
              type="danger"
              icon="el-icon-delete"
              circle
              size="mini"
              @click="handleDelete(scope.$index, scope.row)"
            />
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="block">
      <el-pagination
        :current-page="currentPage"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        style="margin-top:20px"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>
<script>
export default {
  props: {
    tableFomat: {
      type: Array,
      default: () => {
      }
    },
    tableData: {
      type: Array,
      default: () => {
      }
    },
    total: {
      type: Number,
      default: () => {
      }
    },
    operateVisible: {
      type: Boolean,
      default: true
    },
    editVisible: {
      type: Boolean,
      default: true
    },
    deleteVisible: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      currentPage: 1,
      pagesize: 10
    }
  },
  computed: {

  },
  methods: {
    handleSelectionChange(val) {
      this.$emit('handleSelectionChange', val)
    },
    // 页码
    handleSizeChange(pagesize) {
      this.pagesize = pagesize
    },
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage
    },
    // 编辑删除
    handleEdit(index, row) {
      this.$emit('handleEdit', index, row)
    },
    handleDelete(index, row) {
      this.$emit('handleDelete', index, row)
    }
  }
}
</script>
